const App = {
  mixins: [Save], //配置文件，路径/utils/mixins.js
  data() {
    return {
      currentCaptainId: null, // 存储当前负责人的身份证号，需在合适时机赋值
      fzrsz: [],
      originalTableData: [],
      originalTableData2: [],
      currentCaptainId: null, // 当前负责人ID
      positions: [
        { value: "联络员", label: "联络员" },
        { value: "产业指导员", label: "产业指导员" },
        { value: "扶贫专干", label: "扶贫专干" },
        { value: "党建指导员", label: "党建指导员" },
        { value: "副书记", label: "副书记" },
        { value: "科长", label: "科长" },
        { value: "副科长", label: "副科长" },
      ],
      selectedCount: 0,
      defaultProps: {
        children: "children",
        label: "label",
      },
      filterText: "",
      data: [],
      fzrm: "负责人",
      originalCheckboxOptions: [], // 新增：保存原始人员列表
      tableData: [],
      checkboxOptions2: [],
      // 复选框选项数组
      checkboxOptions: [],
      // 选中的选项值数组
      selectedOptions: [],
      childDataForm: [{}],
      dialogFormVisible: false,
      Nation: [],
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      member: [],
      fzr: [
        // 是否负责人下拉选项列表
        { value: "0", label: "否" },
        { value: "1", label: "是" },
      ],
      Affiliation: [
        {
          value: "部长",
          label: "部长",
        },
        {
          value: "副部长",
          label: "副部长",
        },
        {
          value: "党员",
          label: "党员",
        },
        {
          value: "书记",
          label: "书记",
        },
        {
          value: "副书记",
          label: "副书记",
        },
        {
          value: "科长",
          label: "科长",
        },
        {
          value: "副科长",
          label: "副科长",
        },
      ],
      Work_Team_SerialNumber: "",
      Village_Number: "",
    };
  },
  mounted() {
    let ls_URL = window.location.href;
    this.Work_Team_SerialNumber = getQueryObject(ls_URL, "nodeKey");
    this.Village_Number = getQueryObject(ls_URL, "Village_Number");
    console.log(this.Work_Team_SerialNumber);
    this.gzd(this.Work_Team_SerialNumber);
    this.cren(this.Work_Team_SerialNumber);
    this.Init();
    this.pe();
    this.dat();
  },
  watch: {
    checkboxOptions: {
      handler(newVal) {
        const selectedMembers = newVal.filter(
          (option) =>
            option.checked &&
            !this.childDataForm.some(
              (captain) => captain.ID_Card_Number === option.ID_Card_Number
            )
        );

        this.tableData = selectedMembers.map((option) => {
          const original = this.originalTableData2.find(
            (item) => item.ID_Card_Number === option.ID_Card_Number
          );
          return {
            ...option,
            Mobile: original?.Mobile || option.Contact_Phone || "", // 确保使用option对象
            Position: original?.Position || "",
            Start_Date: original?.Start_Date || "",
          };
        });
      },
      deep: true,
    },
    filterText(newVal) {
      if (this.$refs.tree) {
        this.$refs.tree.filter(newVal);
      }
    },
  },
  methods: {
    gzd(Arg_res) {
      const _this = this;
      $.ajax({
        headers: requestHeaders(),
        // url: `http://10.1.0.59:8084/workTeam/queryWorkTeamMembersByWorkTeamSerialNumber`,
        url: `${mh}/generalBusiness/generalQueryByTableNameWithOriginal`,
        method: "post",
        data: {
          Data: "work_teams", //表名
          Condition: "Work_Team_SerialNumber='" + Arg_res + "'", //条件
        },
        success: (res) => {
          console.log(res);
          _this.fzrsz = res;
          _this.cren(Arg_res);
        },
        complete: (XMLHttpRequest) => {
          requestPretreatment(XMLHttpRequest);
        },
      });
    },
    cren(Arg_res) {
      const _this = this;
      $.ajax({
        headers: requestHeaders(),
        // url: `http://10.1.0.59:8084/workTeam/queryWorkTeamMembersByWorkTeamSerialNumber`,
        url: `${mh}/workTeam/queryWorkTeamMembersByWorkTeamSerialNumber`,
        method: "get",
        data: {
          Data: Arg_res, //sql名
        },
        success: (res) => {
          console.log("接口返回数据:", res);
          if (res.WorkTeam.length > 0) {
            // 1. 初始化负责人ID（关键：后续用来过滤负责人）
            _this.currentCaptainId = res.Captain[0]?.ID_Card_Number;

            // 2. 保存原始成员数据（含职务、时间）
            _this.originalTableData2 = JSON.parse(JSON.stringify(res.Members));
            console.log(
              "原始成员数据（含职务/时间）:",
              _this.originalTableData2
            );
            // 确保childDataForm有默认值，避免空指针
            _this.childDataForm = res.Captain;
            _this.tableData = res.Members;
            try {
              _this.GetAgensies_name( _this.childDataForm[0].ID_Card_Number);
              // _this.handleSelectMember(_this.childDataForm[0], _this.childDataForm[0].ID_Card_Number);
            } catch (error) {
              console.error(error);
            }
            // res.Captain.length > 0
            //   ? res.Captain
            //   : [
            //       {
            //         ID_Card_Number: "",
            //         Contact_Phone: "",
            //         Personal_Name: "",
            //         Position: "",
            //         Start_Date: "",
            //         EndDate: "",
            //         Is_Captain: 1,
            //         status: "add",
            //       },
            //     ];
            if (res.Captain[0].ID_Card_Number == "") {
              res.Captain[0].status = "add";
            } else {
              res.Captain[0].status = "modify";
            }
            // _this.childDataForm.forEach((item) => {
            //   item.status = "modify";
            // });
            // 3. 初始化表格数据：关联原始数据，保留职务、时间
            _this.tableData = res.Members.map((member) => {
              // 从原始数据找关联（确保字段不丢失）
              const original = _this.originalTableData2.find(
                (item) => item.ID_Card_Number === member.ID_Card_Number
              );
              return {
                ...member,
                // 覆盖为原始数据的字段（确保不丢失）
                Position: original?.Position || "",
                Start_Date: original?.Start_Date || "",
                Mobile: original?.Mobile || original?.Contact_Phone,
                // 其他需要保留的字段...
              };
            });
            console.log("初始化表格数据（含职务/时间）:", _this.tableData);

            // 4. 处理复选框：过滤负责人，保留已选状态
            _this.checkboxOptions = _this.checkboxOptions2.filter(
              (option) => option.ID_Card_Number !== _this.currentCaptainId
            );
            _this.setCheckboxesSelected(res.Members); // 恢复选中状态
          } else {
            _this.childDataForm.forEach((item) => (item.status = "add"));
          }
        },
        complete: (XMLHttpRequest) => {
          requestPretreatment(XMLHttpRequest);
        },
      });
    },
    setCheckboxCheckedStatus() {
      // 遍历可选项，匹配已选成员，设置 checked
      this.checkboxOptions.forEach((option) => {
        const isChecked = this.tableData.some(
          (member) => member.ID_Card_Number === option.ID_Card_Number
        );
        option.checked = isChecked;
      });
      // 更新已选数量显示
      this.updateSelectedCount();
    },
    // 设置复选框选中状态的方法
    setCheckboxesSelected(selectedMembers) {
      console.log(
        "设置复选框选中状态，已选中成员数量:",
        selectedMembers.length
      );

      const selectedIds = selectedMembers.map(
        (member) => member.ID_Card_Number
      );
      const captainId = this.childDataForm[0]?.ID_Card_Number;
      const selectedIdMap = new Map(selectedIds.map((id) => [id, true]));

      this.checkboxOptions.forEach((option) => {
        if (option.ID_Card_Number === captainId) {
          option.checked = false;
          return;
        }

        const isSelected = selectedIdMap.has(option.ID_Card_Number);
        option.checked = isSelected;
        console.log(`成员 ${option.Personal_Name} 选中状态:`, isSelected);
      });

      this.updateSelectedCount();
      console.log("设置完成，当前已选数量:", this.selectedCount);
    },
    // 专门用于更新复选框选中状态的方法
    updateCheckboxesSelection(selectedMembers) {
      // 提取已选中人员的身份证号
      const selectedIds = selectedMembers.map(
        (member) => member.ID_Card_Number
      );
      const checkboxIds = this.checkboxOptions.map(
        (option) => option.ID_Card_Number
      );
      const captainId = this.childDataForm[0]?.ID_Card_Number;

      // 遍历复选框选项设置选中状态
      this.checkboxOptions.forEach((option) => {
        // 跳过负责人
        if (option.ID_Card_Number === captainId) {
          option.checked = false;
          return;
        }

        // 设置选中状态
        option.checked = selectedIds.includes(option.ID_Card_Number);
      });

      // 仅更新选中计数
      this.updateSelectedCount();
    },
    handleCheckboxChange(option) {
      console.log(option);
      if (option.ID_Card_Number === this.currentCaptainId) {
        option.checked = true;
        this.$message.warning("负责人不可取消选择");
        return;
      }
      this.updateSelectedCount();
    },
    // 处理职务变更
    handlePositionChange(row, Position) {
      // 更新行数据中的职务信息
      row.Position = Position;
      console.log(`更新职务为:`, Position);
    },
    // 清空选中并移除选项
    clearAll() {
      // 保存当前负责人ID
      const currentCaptainId = this.currentCaptainId;

      // 清空所有成员（保留负责人）
      this.checkboxOptions = this.checkboxOptions.filter(
        (item) => item.ID_Card_Number === currentCaptainId
      );

      // 如果有负责人，确保其在列表中且未选中
      if (currentCaptainId) {
        const captain = this.checkboxOptions2.find(
          (person) => person.ID_Card_Number === currentCaptainId
        );
        if (captain) {
          // 确保负责人在列表中
          const isCaptainInList = this.checkboxOptions.some(
            (item) => item.ID_Card_Number === currentCaptainId
          );

          if (!isCaptainInList) {
            this.checkboxOptions.push({
              ...captain,
              checked: false,
            });
          }
        }
      } else {
        // 没有负责人时，清空列表
        this.checkboxOptions = [];
      }

      // 更新已选数量
      this.updateSelectedCount();
    },
    // 更新已选数量
    updateSelectedCount() {
      this.selectedCount = this.checkboxOptions.filter(
        (option) => option.checked
      ).length;
    },
    // 修复过滤方法
    filterNode(value, data) {
      // 确保数据结构一致性，使用统一的 label 属性
      const label = data.label || data.Party_Organization_Name;

      if (!value) return true;
      return label && label.includes(value);
    },
    handleNodeClick(data) {
      const _this = this;
      $.ajax({
        headers: requestHeaders(),
        url: `${mh}/generalBusiness/generalQueryBySQLSerialNumber`,
        type: "post",
        data: {
          SQLSerialNumber: "f_party_member_information",
          Condition: "",
          ExtensionCondition: window.btoa(
            unescape(
              encodeURIComponent(
                "AND party_member_information.Party_Organization_SerialNumber='" +
                data.Party_Organization_SerialNumber +
                "'"
              )
            )
          ),
        },
        success: (newMembers) => {
          console.log("获取到新的人员列表:", newMembers);

          // 获取当前负责人的ID（如果有）
          const currentCaptainId = _this.childDataForm[0].ID_Card_Number;

          // 创建一个映射，用于快速查找已存在的人员
          const existingMap = {};
          _this.checkboxOptions.forEach((member) => {
            existingMap[member.ID_Card_Number] = member;
          });

          // 合并新的人员列表到现有列表，排除当前负责人
          newMembers.forEach((newMember) => {
            // 跳过当前负责人
            if (newMember.ID_Card_Number === currentCaptainId) {
              return;
            }

            // 如果人员已存在，保留其选中状态
            if (existingMap[newMember.ID_Card_Number]) {
              Object.assign(existingMap[newMember.ID_Card_Number], newMember);
            } else {
              // 添加新人员，并默认设置为未选中
              _this.checkboxOptions.push({
                ...newMember,
                checked: false,
              });
            }
          });

          // 更新已选数量
          _this.updateSelectedCount();

          console.log("合并后的人员列表:", _this.checkboxOptions);
        },
        complete: (XMLHttpRequest) => {
          requestPretreatment(XMLHttpRequest);
        },
        dataType: "json",
      });
    },
    dat() {
      const _this = this;
      $.ajax({
        headers: requestHeaders(),
        url: `${mh}/permissionsTree/getPartyOrganizationsTreeByPermissions`,        
        type: "GET",
        data: {
          PartyOrganizationsCode: getCookie('party'),
         
        },
        success: (data) => {
          console.log(data);

          _this.treeData = data; // 直接使用 this
          // 将数据转换为树组件需要的格式
          _this.data = data.map((item) => ({
            id: item.code, // 假设原始数据中的code字段对应树组件的id
            label: item.Party_Organization_Name, // 假设原始数据中的name字段对应树组件的label
            // 保留其他可能需要的字段
            ...item,
          }));
          console.log(_this.treeData);
        },
        complete: (XMLHttpRequest) => {
          requestPretreatment(XMLHttpRequest);
        },
        dataType: "json",
      });
    },
    handleDateChange(row, field, date) {
      // 找到表格数据中对应的行
      const targetRow = this.tableData.find(
        (item) => item.ID_Card_Number === row.ID_Card_Number
      );

      if (targetRow) {
        // 直接更新格式化后的日期
        targetRow[field] = date;

        // 日期验证：结束日期不能早于开始日期
        if (field === "EndDate" && targetRow.Start_Date && date) {
          const Start_Date = new Date(targetRow.Start_Date);
          const endDate = new Date(date);

          if (endDate < Start_Date) {
            this.$message.warning("结束日期不能早于开始日期");
            targetRow.EndDate = ""; // 重置无效的结束日期
            return;
          }
        }

        console.log(
          `更新 ${targetRow.Personal_Name} 的 ${field === "Start_Date" ? "开始时间" : "结束时间"
          } 为:`,
          date
        );
      }
    },
    async handleSubmit() {
      const _this = this;
      const allValid = await this.validateAllForms();
      if (allValid) {
        if (this.tableData.length === 0) {
          ElMessage.error("请选择工作队人员");
          return;
        }

        // 检查负责人开始时间
        if (!this.childDataForm[0].Start_Date) {
          ElMessage.error("请为负责人填写驻村开始时间");
          return;
        }

        // 检查成员开始时间
        const membersWithoutStart_Date = this.tableData.filter(
          (member) => !member.Start_Date || member.Start_Date === ""
        );
        if (membersWithoutStart_Date.length > 0) {
          const memberNames = membersWithoutStart_Date
            .map((member) => member.Personal_Name)
            .join("、");
          this.$message.error(`请为以下成员填写驻村开始时间：${memberNames}`);
          return;
        }

        // 标记tableData的修改状态
        this.tableData.forEach((item) => {
          item.Is_Captain = 0;
          item.status = this.originalTableData2.some(
            (original) => original.ID_Card_Number === item.ID_Card_Number
          )
            ? "modify"
            : "add";
        });

        // 构建提交数据
        const submitData = [...this.tableData, this.childDataForm[0]];

        // ------------------- 处理被取消选择的成员 -------------------
        const submitIds = new Set(
          submitData.map((member) => member.ID_Card_Number)
        );
        const cancelledMembers = this.originalTableData2.filter(
          (member) => !submitIds.has(member.ID_Card_Number)
        );

        // 标记被取消成员的Row_Status为"1"并更新到originalTableData
        cancelledMembers.forEach((member) => {
          console.log(member);
          member.Row_Status = "1"; // 设置删除状态
          // this.originalTableData2.push(member);
        });
        console.log(cancelledMembers, "被取消成员");

        // ------------------- 处理结束 -------------------

        // 处理submitData中的modify数据
        submitData.forEach((item) => {
          item.Work_Team_SerialNumber = this.Work_Team_SerialNumber;

          if (item.status === "modify") {
            const index = this.originalTableData2.findIndex(
              (original) => original.ID_Card_Number === item.ID_Card_Number
            );
            if (index !== -1) {
              Object.assign(this.originalTableData2[index], item);
            } else {
              this.originalTableData.push(item);
            }
          }
        });
        if (this.childDataForm[0].status === "modify") {
          this.originalTableData2.push(this.childDataForm[0]);
        }

        // 查找负责人并更新
        const captainData = submitData.find((item) => item.Is_Captain === 1);
        if (captainData) {
          this.fzrsz[0].Captain_Number = captainData.ID_Card_Number;
        }

        // 构建提交数据对象
        const lJSONObject_work_teams = { work_teams: this.fzrsz };
        const lJSONObject_work_teams_members = {
          work_teams_members: submitData.filter(
            (item) => item.status === "add"
          ),
        };
        const lJSONObject_work_teams_members2 = {
          work_teams_members: this.originalTableData2,
        };
        this.fzrsz[0].Children = lJSONObject_work_teams_members2;

        const lJSONObject_DataSet = {
          Add: lJSONObject_work_teams_members,
          Modify: lJSONObject_work_teams,
        };

        console.log(this.originalTableData2);
        console.log(this.originalTableData);
        console.log(this.childDataForm);

        console.log(submitData);
        console.log("提交数据集:", lJSONObject_DataSet);
        // return;
        // 执行提交
        const _this = this;
        $.ajax({
          headers: requestHeaders(),
          url: `${mh}/clientOperation/generalSaveForClient`,
          type: "POST",
          data: { Data: JSON.stringify(lJSONObject_DataSet) },
          success: (Result) => {
            console.log(Result);
            if (Result.Status === "success") {
              _this.$message({ message: "提交成功", type: "success" });
              window.history.go(-1);
            } else {
              _this.$message.error("提交失败，请稍后再试");
            }
          },
          complete: (XMLHttpRequest) => {
            requestPretreatment(XMLHttpRequest);
          },
          dataType: "json",
        });
      }
    },

    handleSelectMember(item, selectedId) {
      const selectedPerson = this.checkboxOptions2.find(
        (option) => option.ID_Card_Number === selectedId
      );
      console.log(selectedPerson);

      if (selectedPerson) {
        // 更新当前负责人 ID
        this.currentCaptainId = selectedId;
        const oldCaptainId = this.currentCaptainId;

        // 更新负责人信息
        item.ID_Card_Number = selectedPerson.ID_Card_Number;
        item.Contact_Phone = selectedPerson.Contact_Phone;
        item.Personal_Name = selectedPerson.Personal_Name;
        item.Mobile = selectedPerson.Contact_Phone;
        item.Agensies_Name = selectedPerson.Agensies_Name;
        // 注意：不重置职务和时间，保留用户已填写的值
        item.Position = ""; // 移除这行
        item.Start_Date = ""; // 移除这行
        // item.EndDate = ""; // 移除这行
        item.Is_Captain = 1;

        // 更新当前负责人ID
        this.currentCaptainId = selectedId;

        // 处理原负责人
        if (oldCaptainId) {
          const oldCaptain = this.checkboxOptions2.find(
            (person) => person.ID_Card_Number === oldCaptainId
          );
          if (oldCaptain) {
            this.checkboxOptions = this.checkboxOptions.filter(
              (option) => option.ID_Card_Number !== oldCaptainId
            );
            this.checkboxOptions.push({
              ...oldCaptain,
              checked: false,
            });
          }
        }

        // 移除新负责人从可选列表
        this.checkboxOptions = this.checkboxOptions.filter(
          (option) => option.ID_Card_Number !== selectedId
        );

        this.updateSelectedCount();
      }
    },

    handleClearMember(item) {
      // 如果有当前负责人，将其添加回成员选择池
      if (item.ID_Card_Number) {
        const currentCaptain = this.checkboxOptions2.find(
          (person) => person.ID_Card_Number === item.ID_Card_Number
        );

        if (currentCaptain) {
          // 确保不重复添加
          const isDuplicate = this.checkboxOptions.some(
            (option) => option.ID_Card_Number === currentCaptain.ID_Card_Number
          );

          if (!isDuplicate) {
            this.checkboxOptions.push({
              ...currentCaptain,
              checked: false, // 设置为未选中状态
            });
          }
        }
      }

      // 清空负责人信息
      item.ID_Card_Number = "";
      item.Contact_Phone = "";
      item.Personal_Name = "";
      item.Position = "";
      item.Start_Date = "";
      item.EndDate = "";
      item.Is_Captain = 0;

      // 更新已选数量
      this.updateSelectedCount();
    },

    // 处理成员选择
    handleMemberSelect(option) {
      // 检查是否已选择为负责人
      const isCaptain = this.childDataForm.some(
        (captain) => captain.ID_Card_Number === option.ID_Card_Number
      );

      if (isCaptain) {
        this.$message.warning("该人员已被选为负责人，不能同时作为普通成员");
        option.checked = false; // 确保复选框不被选中
        return;
      }

      // 切换成员选中状态
      option.checked = !option.checked;

      // 更新已选数量
      this.updateSelectedCount();
    },
    pe() {
      const _this = this;
      $.ajax({
        headers: requestHeaders(),
        url: `${mh}/generalBusiness/generalQueryBySQLSerialNumber`,
        method: "post",
        data: {
          SQLSerialNumber: "f_party_member_information", //sql名
          Condition: "", //不必选的条件
          // ExtensionCondition: window.btoa(
          //   unescape(
          //     encodeURIComponent(
          //       " and personal_information.RR_Village_Number in ("+ getCookie('village') +")",
          //     ))),
        },
        success: (res) => {
          console.log(res);
          _this.checkboxOptions2 = res;
           $.ajax({
            headers: requestHeaders(),
            url: `${mh}/generalBusiness/generalQueryBySQLSerialNumber`,
            method: "post",
            data: {
              SQLSerialNumber: "SQL_government_member_agencies", //sql名
              Condition: "", //不必选的条件
              ExtensionCondition: "", //不必选的扩展sql
            },
            success: (data) => {
              if (data.length > 0) {
                _this.checkboxOptions2.forEach(item => {
                  const findItem = data.find(i => i.ID_Card_Number == item.ID_Card_Number)
                  if (findItem) {
                    item.Agensies_Name = findItem.Agensies_Name
                  }
                  else {
                    item.Agensies_Name = ""
                  }
                })
              }


            },
            complete: (XMLHttpRequest) => {
              requestPretreatment(XMLHttpRequest);
            },
          });
        },
        complete: (XMLHttpRequest) => {
          requestPretreatment(XMLHttpRequest);
        },
      });
    },
    xin() {
      this.dialogFormVisible = true;
    },
    // 可以添加选项操作方法
    addOption(newOption) {
      this.checkboxOptions.push(newOption);
    },
    removeOption(index) {
      this.checkboxOptions.splice(index, 1);
    },
    ID_Validity(rule, value, callback) {
      if (!value) {
        callback(new Error("请输入身份证"));
      } else if (!ID_Validity(value)) {
        callback(new Error("身份证格式不正确"));
      } else {
        callback();
      }
    },
    Init() {
      let str = "";
      str =
        "and personal_information.RR_Village_Number ='" +
        this.Village_Number +
        "'";
      $.ajax({
        headers: requestHeaders(),
        url: `${mh}/generalBusiness/generalQueryBySQLSerialNumber`,
        method: "post",
        data: {
          SQLSerialNumber: "Sql_WorkTeamMember",
          Condition: "",
          ExtensionCondition: window.btoa(unescape(encodeURIComponent(str))),
        },
        success: (res) => {
          this.member = res;
        },
        complete: (XMLHttpRequest) => {
          requestPretreatment(XMLHttpRequest);
        },
      });
    },

    GetAgensies_name(ID_Card_Number) {
      $.ajax({
        headers: requestHeaders(),
        url: `${mh}/generalBusiness/generalQueryBySQLSerialNumber`,
        method: "post",
        data: {
          SQLSerialNumber: "SQL_government_member_agencies", //sql名
          Condition: "", //不必选的条件
          ExtensionCondition: btoa(unescape(encodeURIComponent(" and government_member_information.ID_Card_Number='" + ID_Card_Number + "'"))), //不必选的扩展sql
        },
        success: (data) => {
          if (data.length > 0) {
            this.childDataForm[0].Agensies_Name = data[0].Agensies_Name
          } else {
            this.childDataForm[0].Agensies_Name = ""
          }

        },
        complete: (XMLHttpRequest) => {
          requestPretreatment(XMLHttpRequest);
        },
      });
    },
    PH_Validity(rule, value, callback) {
      if (!value) {
        callback(new Error("请输入联系电话"));
      } else if (!validatemobile(value)) {
        callback(new Error("联系电话格式不正确"));
      } else {
        callback();
      }
    },
  },
};

const { createApp, ref } = Vue;
const app = createApp(App);
app.use(ElementPlus, { locale: zhCn });
//这种方式是引入全部图标，无需单个引入
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component);
}
const ElMessage = ElementPlus.ElMessage;
app.mount("#app");
